What are load functions and how do they affect hydration?

In SvelteKit, load functions are used to fetch or prepare data before a page or layout renders. They can run on the server during SSR and/or in the browser during client-side navigation. The data returned from load is passed to the corresponding +page.svelte or +layout.svelte file as the data prop.

Hydration is the process by which SvelteKit takes the server-rendered HTML and attaches client-side interactivity. If a load function fetches data during SSR, the HTML already contains that data, so the client receives a fully rendered page, improving perceived load time and SEO. During client-side navigation, load runs in the browser, updating the page dynamically.

Example: load() in +page.js

Example: Receiving Data in +page.svelte

Best practices for load():

Use load to fetch data required for a page before rendering.
Data returned from load is automatically serialized and injected into SSR HTML for hydration.
During client-side navigation, load runs in the browser to update the page without a full reload.
You can access route parameters via params and query parameters via url.
Shared data for multiple pages can be loaded in +layout.js or +layout.ts.

Question Loading...

What are load functions and how do they affect hydration?

Example: load() in +page.js

Example: Receiving Data in +page.svelte

Best practices for load():

Use load to fetch data required for a page before rendering.
Data returned from load is automatically serialized and injected into SSR HTML for hydration.
During client-side navigation, load runs in the browser to update the page without a full reload.
You can access route parameters via params and query parameters via url.
Shared data for multiple pages can be loaded in +layout.js or +layout.ts.